{% load static %}
{% load i18n %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>{% translate "Employee onboarding" %}</title>
    <link rel="icon" type="image/x-icon" href="{% static 'favicon.png' %}">
    <!-- CSS files -->
    <link rel="stylesheet" href="{% static 'css/theme.css' %}">
    <link rel="stylesheet" href="{% static 'css/extra.css' %}">
    <link rel="stylesheet" href="{% static 'css/selectize-bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/microtip.min.css' %}">
    {% block extra_css %}
    {% endblock %}
  </head>
  <body class="antialiased">
    <div class="wrapper">
      <header class="navbar navbar-expand-md navbar-light d-print-none">
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="navbar-nav flex-row order-md-last">
          <div class="input-icon" style="margin-top: 5px; margin-right: 10px;">
            <input class="form-control d-inline-block" id="q" hx-target="#search" hx-swap="outerHTML" placeholder="Search..." name="q" hx-get="{% url 'organization:search' %}" hx-params="q" hx-trigger="keyup delay:500ms changed" hx-indicator="#search-spinner">
             <span class="input-icon-addon requesting" id="search-spinner">
               <div class="spinner-border spinner-border-sm text-muted" role="status"></div>
             </span>
            </div>
            <div class="nav-item dropdown d-none d-md-flex me-3">
              <a href="{% url 'integrations:trackers' %}" class="nav-link d-flex lh-1 text-reset p-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-bolt" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11" /></svg>
              </a>
            </div>
            <div class="nav-item dropdown d-none d-md-flex me-3">
              <a href="{% url 'organization:notifications' %}" class="nav-link d-flex lh-1 text-reset p-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
                {% if request.user.has_new_changelog_notifications %}
                  <span class="badge bg-red badge-notification"></span>
                {% endif %}
              </a>
            </div>
            <div class="nav-item dropdown">
              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
                {% include "_profile_image.html" with user=request.user %}
                <div class="d-none d-xl-block ps-2">
                  <div>{{ request.user.full_name }}</div>
                  <div class="mt-1 small text-muted">{{ request.user.get_role_display }}</div>
                </div>
              </a>
              <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                <form method="post" action="{% url 'account_logout' %}">
                  {% csrf_token %}
                  <button class="dropdown-item">{% translate "Logout" %}</button>
                </form>
              </div>
            </div>
          </div>
          <div class="collapse navbar-collapse" id="navbar-menu">
            <div class="d-flex flex-column flex-md-row flex-fill align-items-stretch align-items-md-center">
              <ul class="navbar-nav">
                <li class="nav-item dropdown {% if 'people' in request.path %}active{% endif %}">
                  <a class="nav-link dropdown-toggle " href="#navbar-people" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/star -->
                      {% include "_user_icon.html" %}
                    </span>
                    <span class="nav-link-title">
                      {% translate "People" %}
                    </span>
                  </a>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="{% url 'admin:new_hires' %}">
                      {% translate "New hires" %}
                    </a>
                    <a class="dropdown-item" href="{% url 'admin:colleagues' %}">
                      {% translate "Colleagues" %}
                    </a>
                    <a class="dropdown-item" href="{% url 'admin:offboarding' %}">
                      {% translate "Offboarding" %}
                    </a>
                  </div>
                </li>
                <li class="nav-item dropdown {% if 'templates' in request.path %}active{% endif %}">
                  <a class="nav-link dropdown-toggle" href="#navbar-templates" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/star -->
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-box-multiple" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><rect x="7" y="3" width="14" height="14" rx="2"></rect><path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg>
                    </span>
                    <span class="nav-link-title">
                      {% translate "Templates" %}
                    </span>
                  </a>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="{% url 'todo:list' %}" >
                      {% translate "To do" %}
                    </a>
                    <a class="dropdown-item" href="{% url 'resources:list' %}" >
                      {% translate "Resources" %}
                    </a>
                    <a class="dropdown-item" href="{% url 'introductions:list' %}" >
                      {% translate "Introductions" %}
                    </a>
                    <a class="dropdown-item" href="{% url 'appointments:list' %}" >
                      {% translate "Appointments" %}
                    </a>
                    <a class="dropdown-item" href="{% url 'preboarding:list' %}">
                      {% translate "Preboarding" %}
                    </a>
                    <a class="dropdown-item" href="{% url 'badges:list' %}">
                      {% translate "Badges" %}
                    </a>
                    <a class="dropdown-item" href="{% url 'hardware:list' %}">
                      {% translate "Hardware" %}
                    </a>
                  </div>
                </li>
                <li class="nav-item dropdown {% if 'sequences' in request.path %}active{% endif %}">

                  <a class="nav-link dropdown-toggle" href="#navbar-sequences" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
                    <span class="nav-link-icon d-md-none d-lg-inline-block">
                      {% include "_sequence_icon.html" %}
                    </span>
                    <span class="nav-link-title">
                      {% translate "Sequences" %}
                    </span>
                  </a>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="{% url 'sequences:list' %}">
                      {% translate "Onboarding" %}
                    </a>
                    <a class="dropdown-item" href="{% url 'sequences:offboarding-list' %}">
                      {% translate "Offboarding" %}
                    </a>
                  </div>
                </li>
                <li class="nav-item dropdown {% if 'admin/tasks/' in request.path %}active{% endif %}">
                  <a class="nav-link dropdown-toggle" href="#navbar-tasks" data-bs-toggle="dropdown" role="button" aria-expanded="false" >
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/star -->
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-list-check" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M3.5 5.5l1.5 1.5l2.5 -2.5"></path><path d="M3.5 11.5l1.5 1.5l2.5 -2.5"></path><path d="M3.5 17.5l1.5 1.5l2.5 -2.5"></path><line x1="11" y1="6" x2="20" y2="6"></line><line x1="11" y1="12" x2="20" y2="12"></line><line x1="11" y1="18" x2="20" y2="18"></line></svg>
                    </span>
                    <span class="nav-link-title">
                      {% translate "Tasks" %}
                    </span>
                  </a>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="{% url 'admin_tasks:mine' %}" >
                      {% translate "Your tasks" %}
                    </a>
                      <a class="dropdown-item" href="{% url 'admin_tasks:all' %}" >
                        {% translate "All tasks" %}
                      </a>
                  </div>
                </li>
                <li class="nav-item {% if 'settings' in request.path %}active{% endif %}">
                  <a class="nav-link" href="{% if request.user.is_admin %}{% url 'settings:general' %}{% else %}{% url 'settings:personal-language' %}{% endif %}" role="button" aria-expanded="false">
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/star -->
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-settings" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"></path><circle cx="12" cy="12" r="3"></circle></svg>
                    </span>
                    <span class="nav-link-title">
                      {% translate "Settings" %}
                    </span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </header>
      <div class="page-wrapper">
        <div id="search"></div>
        <div class="container-xl">
          <!-- Page title -->
          <div class="page-header d-print-none">
            <div class="row align-items-center">
              <div class="col">
                <!-- Page pre-title -->
                <h2 class="page-title">
                  {{ title }}
                </h2>
                <div class="page-pretitle">
                  {{ subtitle }}
                </div>
              </div>
              <!-- Page title actions -->
              <div class="col-auto ms-auto d-print-none">
                <div class="btn-list">
                  {% block actions %}
                  {% endblock %}
                  {% if add_action %}
                  <a href="{{ add_action }}" class="btn btn-primary d-none d-sm-inline-block">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
                    {% translate "Add" %}
                  </a>
                  {% endif %}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="page-body">
          <div class="container-xl">
            {% for message in messages %}
            <div class="alert alert-{% if message.tags == 'error' %}danger{% else %}success{% endif %}">
              {{ message }}
            </div>
            {% endfor %}
            {% block content %}
            {% endblock %}
          </div>
        </div>
        <footer class="footer footer-transparent d-print-none">
          <div class="container">
            <div class="row text-center align-items-center flex-row-reverse">
              <div class="col-lg-auto ms-lg-auto">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item"><a href="https://docs.chiefonboarding.com" class="link-secondary">{% translate "Documentation" %}</a></li>
                  <li class="list-inline-item">
                    <a href="https://github.com/chiefonboarding/chiefonboarding" target="_blank" class="link-secondary" rel="noopener">
                      <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-github" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5"></path></svg>
                      {% translate "Source code" %}
                    </a>
                  </li>
                </ul>
              </div>
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
                    <a href="https://chiefonboarding.com" class="link-secondary">{% translate "ChiefOnboarding" %}</a>
                  </li>
                  <li class="list-inline-item">
                    <a href="https://github.com/chiefonboarding/ChiefOnboarding/blob/master/CHANGELOG.md" class="link-secondary">v2.3.1</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </footer>
      </div>
    </div>
    {% block js %}
    <script defer src="{% static 'js/tabler.js' %}"></script>

    <!-- scripts for selectbox -->
    <script src="{% static 'js/jquery-3.5.1.min.js' %}" type="text/javascript"></script>
    <script src="{% static 'js/selectize-0.13.3.min.js' %}" type="text/javascript"></script>

    <!-- script for htmx -->
    <script src="{% static 'js/htmx-1.7.0.min.js' %}" type="text/javascript"></script>

    <!-- scripts for editor -->
    <script src="{% static 'js/editor-2.22.2.min.js' %}" type="text/javascript"></script>
    <script src="{% static 'js/editor-form.js' %}" type="text/javascript"></script>

    <script>
      document.body.addEventListener('htmx:configRequest', function(event) {
        event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}';
      })
      {% if DEBUG %}
      htmx.logAll();
      {% endif %}
    </script>
    <script defer>
      function initSelectize(prefix="") {
        $(prefix + ' select:not(.multi-with-add):not(.add):not(.disable-selectize)').selectize()
        $(prefix + ' .multi-with-add').selectize({ create: true })
        $(prefix + ' .add').selectize({ create: true })
      }
      $(document).ready(function () {
        // Trigger file input when clicking on upload button
        $(".upload-button").each(function (item) {
          $(this).on('click', function () {
            $(this).parent().find("input").click()
          })
        })
        initSelectize()

        $(".file-input").each(function (item) {
          $(this).on('change', function (file) {
            // ugly, needs clean up
            const originalButtonText = $(this).parent().find(".upload-button").text()
            const fileField = $(this)
            const fileIdInput = $(this).parent().find(".file-id")
            const newFileName = fileField.val().match(/[^\\/]*$/)[0];
            const fileNameSpan = $(this).parent().find(".file-name");
            const filePreview = $(this).parent().find("img");

            $(this).parent().find(".upload-button").text('{% translate "uploading..." %}')
            $.ajax({
              url: "/api/org/file",
              type: 'post',
              data: {'name': newFileName},
              headers: {'X-CSRFToken': '{{ csrf_token }}'},
              success: function( data ) {
                const fileMetaData = data
                $.ajax({
                  type: 'PUT',
                  url: fileMetaData.file.url,
                  contentType: 'binary/octet-stream',
                  processData: false,
                  data: fileField.get()[0].files[0],
                  success: function () {
                    fileField.parent().find(".upload-button").text(originalButtonText)
                    fileIdInput.val(fileMetaData.file.id);
                    fileNameSpan.text(newFileName);
                    filePreview.attr("src", fileMetaData.file.get_url);
                  }
                });
              }
            });
          })
        })

      })
      function getSignedURL (file) {
        return $.ajax({
          url: "/api/org/file",
          type: 'post',
          data: {'name': file.name},
          headers: {'X-CSRFToken': '{{ csrf_token }}'},
        })
      }
      function uploadFile (file, response) {
        return $.ajax({
          type: 'PUT',
          url: response.file.url,
          contentType: 'binary/octet-stream',
          processData: false,
          data: file
        })
      }
      function initWYSIWYGEditor(){
        const forms = document.querySelectorAll('form')
        forms.forEach(function(form) {

          if ('content' in form || 'content_json' in form) {
            let formName = 'content'
            if ('content_json' in form) {
              formName = 'content_json'
            }
            if (document.getElementById('content') === null) {
              return
            }
            let content = JSON.parse(document.getElementById('content').textContent)
            content = JSON.parse(content)
            form[formName].attributes.value.nodeValue = JSON.stringify(content)

            const editor = new EditorJS({
              minHeight: 30,
              autofocus: true,
              placeholder: '{% translate "Start typing..." %}',
              holder: 'element',
              data: content,
              tools: {
                header: Header,
                {% if 'todo' in request.path or 'preboarding' in request.path or 'sequences' in request.path %}
                form: Form,
                {% endif %}
                quote: Quote,
                embed: {
                  class: Embed,
                  inlineToolbar: false,
                  config: {
                    services: {
                      youtube: true,
                    }
                  }
                },
                list: {
                  class: NestedList,
                  inlineToolbar: true,
                },
                delimiter: Delimiter,
                image: {
                  class: ImageTool,
                  config: {
                    uploader: {
                      /**
                       * Upload file to the server and return an uploaded image data
                       * @param {File} file - file selected from the device or pasted by drag-n-drop
                       * @return {Promise.<{success, file: {url}}>}
                       */
                      async uploadByFile(file){
                        // your own uploading logic here
                        let response = await getSignedURL(file)
                        let completed = await uploadFile(file, response)
                        response["file"]["url"] = response["file"]["get_url"]
                        return response
                      },
                    }
                  }
                },
                attaches: {
                  class: AttachesTool,
                  config: {
                    uploader: {
                      /**
                       * Upload file to the server and return an uploaded image data
                       * @param {File} file - file selected from the device or pasted by drag-n-drop
                       * @return {Promise.<{success, file: {url}}>}
                       */
                      async uploadByFile(file){
                        // your own uploading logic here
                        let response = await getSignedURL(file)
                        let completed = await uploadFile(file, response)
                        return response
                      },
                    }
                  }
                }
              },
              onChange: function (value) {
                value.saver.save().then(function(data) {
                  form[formName].attributes.value.nodeValue = JSON.stringify(data)
                })
              }
            });
          }
        })
      }
      window.onload = function(){
        initWYSIWYGEditor()
      }

      $(document).on('change', "select#id_condition_type", function() {
      // Change things to fill in when condition_type changes
       let option = $(this).val()
        if (option == 1){
          $("#add-condition-form #div_id_condition_to_do").parent().removeClass("d-none")
          $("#div_id_condition_admin_tasks").parent().addClass("d-none")
          $("#div_id_days").parent().addClass("d-none")
        } else if (option == 2 || option == 0) {
          $("#add-condition-form #div_id_condition_to_do").parent().addClass("d-none")
          $("#div_id_condition_admin_tasks").parent().addClass("d-none")
          $("#div_id_days").parent().removeClass("d-none")
        } else if (option == 5) {
          $("#add-condition-form #div_id_condition_to_do").parent().addClass("d-none")
          $("#div_id_condition_admin_tasks").parent().addClass("d-none")
          $("#div_id_days").parent().addClass("d-none")
        } else {
          $("#add-condition-form #div_id_condition_to_do").parent().addClass("d-none")
          $("#div_id_condition_admin_tasks").parent().removeClass("d-none")
          $("#div_id_days").parent().addClass("d-none")
        }
      })
      // Reload entire page
      $(document).on("reload-page", function(evt){
          window.location.reload();
      })

    </script>
    {% endblock %}
    {% block extra_js %}
    {% endblock %}
  </body>
</html>
